import React from 'react';

import { Spin } from 'antd';
import Header from './header';
import Tab from './tab';

export default class Element extends React.Component {

    state = {
        reflush: false,
    }

    onReflushStart = ()=>{
        this.setState({reflush : true})
    }

    onReflushEnd = ()=>{
        this.setState({reflush : false})
    }

    render() {
        const {reflush} = this.state
        const { id, data, onChange, tabId, onLoad, moreUrl, hideHeader, hideTab } = this.props;
        const { items, setting, style } = data;
        const { showTab } = setting;

        return (
            <div className="item" id={`item_${id}`}>
                {/* id（生成动态class）、data(style 样式动态值，标题) */}
                {
                    !hideHeader ? (
                        <Header ecId={`${this && this.props && this.props.ecId || ''}_Header@iwvbgm`} id={id} data={data} onChange={onChange} tabId={tabId} onLoad={onLoad} moreUrl={moreUrl} hideTab={hideTab} />
                    ) : null
                }
                <div className="content" id={`content_${id}`}>
                    <div className="content_view" id={`content_view_id_${id}`}>
                        {
                            style.displayPosition != 'right' && (items.length > 1 || (items.length > 0 && showTab == true)) && !hideTab ? (
                                <div className="titlecontainer " id={`titleContainer_${id}`}>
                                    {/* tab数据集合、 tab宽度、tab切换事件、当前选中tab id */}
                                    <Tab ecId={`${this && this.props && this.props.ecId || ''}_Tab@jyna2s`} items={items} setting={setting} onChange={onChange} tabId={tabId} />
                                </div>
                            ) : ''
                        }
                        <div className="tabContant" id={`tabcontant_${id}`} >
                            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@jpa338`} spinning={false}>
                                {this.props.children}
                            </Spin>
                        </div>

                    </div>
                </div>

            </div>

        );
    }
}
